
<template>

    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            router
        >

            <el-submenu v-for="menu in allmenu" :key="menu.powerId" :index="menu.powerName">
              <template slot="title">
                <i class="iconfont" :class="menu.icon"></i>
                <span>{{menu.powerName}}</span>
              </template>

             <el-menu-item-group>
               <el-menu-item v-for="chmenu in menu.menus" :index="chmenu.url" :key="chmenu.powerId">
                  <i class="iconfont" :class="chmenu.icon"></i>
                  <span>{{chmenu.powerName}}</span>
                </el-menu-item>
              </el-menu-item-group>

            </el-submenu>


        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
  name:'Siderbar',
    data() {
        return {
            collapse: false,
            allmenu: []
        }

    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    created() {

      let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      console.log('session信息', userInfo)

      this.$axios.post('/admin/menu', this.$qs.stringify({
       roleId: userInfo.roleId
        // headers: {
        //   'Content-Type': 'application/json;charset=UTF-8'
        // },
      })).then(response => {
        console.log(response)
       this.allmenu = response.data

      }).catch(err => {
        alert(err)
      })
      // this.$root.$on('toggle', value => {
      //   this.collapsed = !value
      //   console.log('确定是真是假', this.collapsed)
      // })
   bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
        
    }
}

</script>

<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
  }

  .sidebar>ul {
    height: 100%;
  }
</style>
